今天要做底部導航欄，用到CupertinoTabBar、BottomNavigationBarItem

Flutter中的Scaffolds可以直接設置導航欄，我選擇使用Cupertino風格的來做。

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
    
  //將要跳轉的頁面門放在這裏
  List<Widget> pages = [
    HomePage(),
    SearchingPage(),
    SearchingPage(),
    SearchingPage(),
    SearchingPage(),
  ];

  //設置currentIndex來控制換頁
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[currentIndex], //放入將會切換的頁面們
      bottomNavigationBar: CupertinoTabBar( 
          currentIndex: currentIndex, //顯示pages內該位置的Widget
          onTap: (index) {
            setState(() {
              currentIndex = index;  //記得setState
            });
          },
          backgroundColor: Colors.black54, 
          activeColor: Colors.white,  //選中時的顏色
          inactiveColor: Colors.grey,  //未選中的顏色
          iconSize: 24.0,
          items: [         //這邊放入數個的BottomNavigationBarItem
            BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text("首頁")),
            BottomNavigationBarItem(
                icon: Icon(Icons.search), title: Text("搜尋")),
            BottomNavigationBarItem(
                icon: Icon(Icons.featured_play_list), title: Text("即將上線")),
            BottomNavigationBarItem(
                icon: Icon(Icons.file_download), title: Text("下載內容")),
            BottomNavigationBarItem(
                icon: Icon(Icons.more_vert), title: Text("更多")),
          ]),
    );
  }
}

那用BottomNavigationBar其實也是差不多的，items、currentIndex、onTap、iconSize都一樣
activeColor跟selectedItemColor只是名稱不同
BottomNavigationBar需要設置selectedFontSize默認14.0、unselectedItemColor默認12.0
另外還可以設置type 有fixed以及shifting

selectedFontSize: 12.0,
unselectedFontSize: 12.0,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.grey,
type: BottomNavigationBarType.fixed,

今日效果圖

GitHub連結： flutter-netflix-clone